<template>
  <view class="invoice-preview-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="发票预览" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 发票预览图片 -->
      <view class="preview-container">
        <!-- <image 
          class="invoice-image" 
          :src="invoiceImageUrl" 
          mode="widthFix"
        /> -->
        <image 
          class="invoice-image" 
          :src="invoiceImageUrl" 
          mode="widthFix"
        />
      </view>
      
      <!-- 底部按钮 -->
      <view class="button-group">
        <button class="preview-btn" @click="previewImage">预览</button>
        <button class="save-btn" @click="handleSave">保存</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'
import { api } from '@/utils/api.js';

const navBarHeight = ref(88)
const invoiceImageUrl = ref('') // 发票图片URL

onLoad((options) => {
  // 接收发票图片URL，如果没有则使用默认占位图
  if (options.imageUrl) {
    var url = decodeURIComponent(options.imageUrl)
    url = 'https://kf.xj.189.cn/xjkf10000/invoiceimg' + url.substring(url.indexOf("?"),url.length);
    // window.location.href='invoicepreview.html?a='+ Math.random() +'&url='+encodeURIComponent(url);
    console.log('url = ',url)
    invoiceImageUrl.value = url
    // var imgUrl = decodeURIComponent(options.imageUrl)
    // previewInvoice(imgUrl)
  } else {
    // 这里可以设置默认的发票图片，或者从接口获取
    invoiceImageUrl.value = '/static/images/image.png' // 示例路径
  }
})

const previewInvoice = (url) => {
  api.previewInvoice({
    invoiceUrl: url
  }).then(res => {
    if (res.code === 200) {
      invoiceImageUrl.value = res.data.invoiceImageUrl
    }
  }).catch(err => {
    console.error('预览发票失败:', err)
  })
}

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})

// 预览图片（点击放大）
const previewImage = () => {
  uni.previewImage({
    urls: [invoiceImageUrl.value],
    current: invoiceImageUrl.value,
    success: () => {
      console.log('预览图片成功')
    },
    fail: (err) => {
      console.error('预览图片失败:', err)
      uni.showToast({
        title: '预览失败',
        icon: 'none',
        duration: 2000
      })
    }
  })
}

// 保存发票
const handleSave = () => {
  // 保存发票到相册
  uni.downloadFile({
    url: invoiceImageUrl.value,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail: (err) => {
            console.error('保存失败:', err)
            uni.showToast({
              title: '保存失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    },
    fail: (err) => {
      console.error('下载失败:', err)
      uni.showToast({
        title: '下载失败',
        icon: 'none',
        duration: 2000
      })
    }
  })
}
</script>

<style scoped>
.invoice-preview-page {
   
  position: relative;
  z-index: 1;
  background: rgba(246, 246, 246, 1);
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.8);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 200rpx;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200rpx);
}

/* 预览容器 */
.preview-container {
  flex: 1;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  margin: 20rpx;
}

/* 发票图片 */
.invoice-image {
  width: 100%;
  max-width: 100%;
  background: rgba(255, 255, 255, 1);
  /* border-radius: 16rpx; */
  box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* 底部按钮 */
.button-group {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 24rpx;
  padding: 32rpx;
}

.preview-btn,
.save-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 88rpx;
  text-align: center;
  border: none;
}

.preview-btn {
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
  border: 2rpx solid rgba(78, 138, 254, 1);
}

.save-btn {
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
}

.preview-btn::after,
.save-btn::after {
  border: none;
}

.preview-btn:active,
.save-btn:active {
  opacity: 0.8;
}
</style>

